Google Charts ব্যবহার করে আপনি সহজেই একাধিক চার্ট তৈরি এবং প্রদর্শন করতে পারেন। Angular অ্যাপ্লিকেশনে একাধিক চার্ট তৈরি করতে আমরা বিভিন্ন ধরনের চার্ট (যেমন Pie Chart, Line Chart, Bar Chart) একটি কম্পোনেন্টে একত্রে রেন্ডার করতে পারি। এখানে আমরা multiple charts তৈরি করার পুরো প্রক্রিয়া দেখব।
প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন বা যদি আপনি আগে থেকেই একটি প্রজেক্ট ব্যবহার করেন, তবে সেটি ব্যবহার করতে পারেন।
ng new google-charts-multiple
cd google-charts-multiple
এখন angular-google-charts লাইব্রেরিটি ইন্সটল করুন:
npm install angular-google-charts
এটি ইনস্টল হওয়ার পর আপনার node_modules ফোল্ডারে angular-google-charts প্যাকেজটি যুক্ত হয়ে যাবে।
এখন, GoogleChartsModule ব্যবহার করার জন্য app.module.ts ফাইলে এটি ইমপোর্ট করুন:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট করুন
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এখন আমরা একাধিক চার্ট তৈরি করব এবং app.component.ts ফাইলে এগুলোর ডেটা ও অপশন কনফিগার করব। আমরা তিনটি চার্ট তৈরি করব: Pie Chart, Line Chart, এবং Bar Chart।
app.component.ts:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Multiple Google Charts Example';
// Pie Chart Data and Options
pieChartType = 'PieChart';
pieChartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
];
pieChartOptions = {
title: 'My Daily Activities',
pieHole: 0.4,
width: 600,
height: 400
};
// Line Chart Data and Options
lineChartType = 'LineChart';
lineChartData = [
['Year', 'Sales'],
['2010', 1000],
['2011', 1170],
['2012', 660],
['2013', 1030]
];
lineChartOptions = {
title: 'Sales Over Time',
curveType: 'function',
legend: { position: 'bottom' },
width: 600,
height: 400
};
// Bar Chart Data and Options
barChartType = 'BarChart';
barChartData = [
['Product', '2019', '2020', '2021'],
['Shirts', 1000, 1170, 660],
['Pants', 600, 800, 1200],
['Shoes', 400, 460, 1120]
];
barChartOptions = {
chart: {
title: 'Product Sales Comparison',
subtitle: 'Sales in 2019, 2020, 2021',
},
bars: 'horizontal', // Horizontal Bar Chart
width: 600,
height: 400
};
}
এখানে, আমরা Pie Chart, Line Chart, এবং Bar Chart এর জন্য আলাদা ডেটা এবং কাস্টম অপশন কনফিগার করেছি।
এখন, app.component.html ফাইলে আমরা তিনটি চার্ট রেন্ডার করব।
app.component.html:<h1>{{ title }}</h1>
<!-- Pie Chart -->
<h2>Pie Chart</h2>
<google-chart
[type]="pieChartType"
[data]="pieChartData"
[options]="pieChartOptions">
</google-chart>
<!-- Line Chart -->
<h2>Line Chart</h2>
<google-chart
[type]="lineChartType"
[data]="lineChartData"
[options]="lineChartOptions">
</google-chart>
<!-- Bar Chart -->
<h2>Bar Chart</h2>
<google-chart
[type]="barChartType"
[data]="barChartData"
[options]="barChartOptions">
</google-chart>
এখানে, আমরা তিনটি চার্টের জন্য আলাদা google-chart কম্পোনেন্ট ব্যবহার করেছি, এবং প্রতিটি কম্পোনেন্টের জন্য আলাদা type, data, এবং options প্রদান করেছি।
এখন Angular অ্যাপ্লিকেশন চালাতে নিচের কমান্ডটি ব্যবহার করুন:
ng serve
এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনার ব্রাউজারে গিয়ে আপনি তিনটি আলাদা চার্ট দেখতে পারবেন: Pie Chart, Line Chart, এবং Bar Chart।
যেহেতু আমাদের তিনটি চার্ট একসাথে দেখাচ্ছে, আপনি এগুলির লেআউট এবং স্টাইল কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:
google-chart {
margin-bottom: 30px;
}
height এবং width অপশনের মাধ্যমে।titleTextStyle, hAxis, vAxis কাস্টমাইজ করে টাইটেল এবং লেবেলগুলো স্টাইল করা যায়।Multiple Charts তৈরি করতে Google Charts API ব্যবহার করে আপনি সহজে একাধিক চার্ট একটি Angular কম্পোনেন্টে রেন্ডার করতে পারেন। আপনি Pie Chart, Line Chart, Bar Chart এবং অন্যান্য অনেক চার্ট তৈরি করতে পারবেন এবং তাদের জন্য আলাদা ডেটা এবং অপশন কাস্টমাইজ করতে পারবেন। এইভাবে আপনি একাধিক ডেটা ভিজুয়ালাইজেশন একযোগে আপনার অ্যাপ্লিকেশনে ব্যবহার করতে পারবেন।
Google Charts API এবং Angular ব্যবহার করে আপনি একাধিক চার্ট তৈরি করতে পারেন এবং একটি কম্পোনেন্টে তাদের প্রদর্শন করতে পারেন। এখানে আমরা একাধিক চার্ট যেমন Pie Chart, Line Chart, এবং Bar Chart তৈরি করে দেখব।
প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি আপনার আগে থেকেই কোনো প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন)।
ng new google-charts-multiple
cd google-charts-multiple
এখন angular-google-charts লাইব্রেরিটি ইন্সটল করুন:
npm install angular-google-charts
এটি ইনস্টল হওয়ার পর angular-google-charts আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।
এখন, Angular অ্যাপ্লিকেশনে GoogleChartsModule ব্যবহার করার জন্য app.module.ts ফাইলে এটি ইমপোর্ট করুন:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
এখন আমরা একাধিক চার্ট তৈরি করব এবং app.component.ts ফাইলে এগুলোর ডেটা ও অপশন কনফিগার করব। আমরা তিনটি চার্ট তৈরি করব: Pie Chart, Line Chart, এবং Bar Chart।
app.component.ts:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Multiple Google Charts Example';
// Pie Chart Data and Options
pieChartType = 'PieChart';
pieChartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
];
pieChartOptions = {
title: 'My Daily Activities',
pieHole: 0.4,
width: 600,
height: 400
};
// Line Chart Data and Options
lineChartType = 'LineChart';
lineChartData = [
['Year', 'Sales'],
['2010', 1000],
['2011', 1170],
['2012', 660],
['2013', 1030]
];
lineChartOptions = {
title: 'Sales Over Time',
curveType: 'function',
legend: { position: 'bottom' },
width: 600,
height: 400
};
// Bar Chart Data and Options
barChartType = 'BarChart';
barChartData = [
['Product', '2019', '2020', '2021'],
['Shirts', 1000, 1170, 660],
['Pants', 600, 800, 1200],
['Shoes', 400, 460, 1120]
];
barChartOptions = {
chart: {
title: 'Product Sales Comparison',
subtitle: 'Sales in 2019, 2020, 2021',
},
bars: 'horizontal', // Horizontal Bar Chart
width: 600,
height: 400
};
}
এখানে, আমরা Pie Chart, Line Chart, এবং Bar Chart এর জন্য আলাদা ডেটা এবং কাস্টম অপশন কনফিগার করেছি।
এখন, app.component.html ফাইলে আমরা তিনটি চার্ট রেন্ডার করব।
app.component.html:<h1>{{ title }}</h1>
<!-- Pie Chart -->
<h2>Pie Chart</h2>
<google-chart
[type]="pieChartType"
[data]="pieChartData"
[options]="pieChartOptions">
</google-chart>
<!-- Line Chart -->
<h2>Line Chart</h2>
<google-chart
[type]="lineChartType"
[data]="lineChartData"
[options]="lineChartOptions">
</google-chart>
<!-- Bar Chart -->
<h2>Bar Chart</h2>
<google-chart
[type]="barChartType"
[data]="barChartData"
[options]="barChartOptions">
</google-chart>
এখানে, আমরা তিনটি চার্টের জন্য আলাদা google-chart কম্পোনেন্ট ব্যবহার করেছি, এবং প্রতিটি কম্পোনেন্টের জন্য আলাদা type, data, এবং options প্রদান করেছি।
এখন Angular অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:
ng serve
এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। আপনার ব্রাউজারে গিয়ে আপনি তিনটি আলাদা চার্ট দেখতে পারবেন: Pie Chart, Line Chart, এবং Bar Chart।
যেহেতু আমাদের তিনটি চার্ট একসাথে দেখাচ্ছে, আপনি এগুলির লেআউট এবং স্টাইল কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ:
google-chart {
margin-bottom: 30px;
}
height এবং width অপশনের মাধ্যমে।titleTextStyle, hAxis, vAxis কাস্টমাইজ করে টাইটেল এবং লেবেলগুলো স্টাইল করা যায়।Multiple Charts তৈরি করতে Google Charts API ব্যবহার করে আপনি সহজেই একাধিক চার্ট একটি Angular কম্পোনেন্টে রেন্ডার করতে পারেন। আপনি Pie Chart, Line Chart, Bar Chart এবং অন্যান্য অনেক চার্ট তৈরি করতে পারবেন এবং তাদের জন্য আলাদা ডেটা এবং অপশন কাস্টমাইজ করতে পারবেন। এইভাবে আপনি একাধিক ডেটা ভিজুয়ালাইজেশন একযোগে আপনার অ্যাপ্লিকেশনে ব্যবহার করতে পারবেন।
Google Charts API-তে আপনি একাধিক চার্ট টাইপ একত্রে ব্যবহার করতে পারেন, যেমন ComboChart, যেখানে একই চার্টে Bar Chart এবং Line Chart একসাথে প্রদর্শিত হতে পারে। এই ধরনের চার্টগুলোর সাহায্যে আপনি বিভিন্ন ডেটা পয়েন্টের মধ্যে সম্পর্ক বা তুলনা করতে পারেন।
এখানে ComboChart ব্যবহার করে BarChart এবং LineChart একত্রে কিভাবে ব্যবহার করা যায় তা দেখানো হচ্ছে।
ComboChart আপনাকে একাধিক চার্ট টাইপ একসাথে ব্যবহার করার সুযোগ দেয়। আপনি একে একটি চার্টে Bar এবং Line টাইপের চার্ট একসাথে প্রদর্শন করতে ব্যবহার করতে পারেন।
এখানে আমরা একটি Combo Chart তৈরি করব, যেখানে BarChart এবং LineChart একসাথে প্রদর্শিত হবে। আমাদের ডেটা হবে কয়েকটি বছরের বিক্রয় পরিসংখ্যান।
app.component.ts ফাইল:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Google Charts - Combo Chart Example';
// Combo Chart Type
chartType = 'ComboChart';
// Chart Data
chartData = [
['Year', 'Sales', 'Expenses'],
['2010', 1000, 400],
['2011', 1170, 460],
['2012', 660, 1120],
['2013', 1030, 540]
];
// Chart Options (Multiple Chart Types together)
chartOptions = {
title: 'Company Performance',
vAxis: { title: 'Amount' },
hAxis: { title: 'Year' },
seriesType: 'bars', // Bar chart
series: { 1: { type: 'line' } } // Line chart for the second data series
};
}
app.component.html ফাইল:<h1>{{ title }}</h1>
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
এছাড়া, আপনি একাধিক চার্ট টাইপ একত্রে দেখানোর জন্য ColumnChart, LineChart, PieChart ইত্যাদি বিভিন্ন চার্ট একত্রে ComboChart এর মধ্যে কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, নিম্নলিখিত ডেটার জন্য ComboChart ব্যবহার করা যেতে পারে:
app.component.ts ফাইল:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Multiple Chart Types Together';
chartType = 'ComboChart'; // ComboChart
// Data for ComboChart
chartData = [
['Year', 'Sales', 'Expenses', 'Profit'],
['2010', 1000, 400, 600],
['2011', 1170, 460, 710],
['2012', 660, 1120, -460],
['2013', 1030, 540, 490]
];
chartOptions = {
title: 'Company Performance',
vAxis: { title: 'Amount' },
hAxis: { title: 'Year' },
seriesType: 'bars', // Bar chart for first data series
series: {
1: { type: 'line' }, // Line chart for second data series (Expenses)
2: { type: 'scatter' } // Scatter chart for third data series (Profit)
}
};
}
app.component.html ফাইল:<h1>{{ title }}</h1>
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
এখানে, Bar Chart, Line Chart, এবং Scatter Chart একত্রে ব্যবহার করা হয়েছে।
ComboChart ব্যবহার করে আপনি Bar Chart, Line Chart, Column Chart, Pie Chart ইত্যাদি একত্রে ব্যবহার করতে পারেন। এটি একাধিক চার্ট টাইপের ডেটা একসাথে প্রদর্শন করতে সাহায্য করে এবং আপনি এই চার্টগুলির মধ্যে সম্পর্ক এবং তুলনা করতে পারেন। seriesType এবং series অপশন ব্যবহার করে আপনি চার্টের বিভিন্ন সিরিজের জন্য আলাদা টাইপ (যেমন বার, লাইন, বা স্ক্যাটার) নির্বাচন করতে পারেন। Google Charts API এ এই কাস্টমাইজেশন ফিচার ব্যবহার করে আপনি আরও কার্যকরী এবং তথ্যপূর্ণ ডেটা ভিজুয়ালাইজেশন তৈরি করতে পারেন।
Google Charts ব্যবহার করার সময়, আপনি ডেটার উৎস (data source) আলাদা আলাদা রাখতে পারেন এবং সেই ডেটা ভিত্তিক চার্টে ভিন্ন ভিন্ন তথ্য বাইন্ডিং করতে পারেন। এই প্রক্রিয়ায় বিভিন্ন ধরনের ডেটা একটি চার্টের মাধ্যমে বা একাধিক চার্টে ব্যবহার করা হয়। নিচে আমি কিভাবে আলাদা আলাদা data binding করতে পারি তা বিস্তারিতভাবে দেখাবো।
ধরা যাক, আমাদের দুটি আলাদা চার্ট রয়েছে, একটি Pie Chart এবং একটি Bar Chart। আমরা Pie Chart-এ একটি ডেটা সেট ব্যবহার করব এবং Bar Chart-এ আরেকটি ডেটা সেট ব্যবহার করব।
app.component.ts ফাইল:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Multiple Google Charts with Data Binding';
// Pie Chart Type and Data
pieChartType = 'PieChart';
pieChartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
];
pieChartOptions = {
title: 'My Daily Activities',
pieHole: 0.4, // Doughnut style
width: 600,
height: 400
};
// Bar Chart Type and Data
barChartType = 'BarChart';
barChartData = [
['City', '2010 Population', '2011 Population'],
['New York', 8175133, 8268231],
['Los Angeles', 3792621, 3844829],
['Chicago', 2695598, 2718782]
];
barChartOptions = {
title: 'City Populations',
chartArea: { width: '50%' },
hAxis: {
title: 'Population',
minValue: 0
},
vAxis: {
title: 'City'
}
};
}
app.component.html ফাইল:<h1>{{ title }}</h1>
<!-- Pie Chart with Data Binding -->
<h2>Pie Chart</h2>
<google-chart
[type]="pieChartType"
[data]="pieChartData"
[options]="pieChartOptions">
</google-chart>
<!-- Bar Chart with Data Binding -->
<h2>Bar Chart</h2>
<google-chart
[type]="barChartType"
[data]="barChartData"
[options]="barChartOptions">
</google-chart>
pieChartData এবং barChartData দুটি আলাদা ডেটা সেট যা Pie Chart এবং Bar Chart-এ বাইন্ড করা হয়েছে। যখন ডেটা পরিবর্তিত হয়, তখন স্বয়ংক্রিয়ভাবে চার্ট আপডেট হয়।pieChartData অ্যারে ব্যবহার করা হচ্ছে, যা বিভিন্ন টাস্কের জন্য ঘণ্টা ভাগ করে।barChartData অ্যারে ব্যবহার করা হচ্ছে, যা বিভিন্ন শহরের জনসংখ্যার তুলনা করছে।pieChartType এবং barChartType দুটি ভিন্ন Chart Type নির্দেশ করছে।আপনি যদি Pie Chart বা Bar Chart-এর ডেটা পরিবর্তন করতে চান, তাহলে আপনি কম্পোনেন্টের ডেটা পরিবর্তন করে সেই চার্ট আপডেট করতে পারেন।
ধরা যাক, আপনি একটি বাটন ক্লিক করার মাধ্যমে Pie Chart বা Bar Chart এর ডেটা পরিবর্তন করতে চান। নিচে দেখানো হলো কিভাবে এই কাজ করা যায়:
app.component.ts ফাইল (ডেটা আপডেট করার ফাংশন):updatePieChartData() {
this.pieChartData = [
['Task', 'Hours per Day'],
['Work', 6],
['Eat', 3],
['Commute', 3],
['Watch TV', 1],
['Sleep', 9]
];
}
updateBarChartData() {
this.barChartData = [
['City', '2010 Population', '2011 Population'],
['New York', 8000000, 8100000],
['Los Angeles', 3800000, 3900000],
['Chicago', 2700000, 2800000]
];
}
app.component.html ফাইল (বাটন ক্লিকের মাধ্যমে ডেটা আপডেট):<h1>{{ title }}</h1>
<!-- Pie Chart with Data Binding -->
<h2>Pie Chart</h2>
<google-chart
[type]="pieChartType"
[data]="pieChartData"
[options]="pieChartOptions">
</google-chart>
<button (click)="updatePieChartData()">Update Pie Chart Data</button>
<!-- Bar Chart with Data Binding -->
<h2>Bar Chart</h2>
<google-chart
[type]="barChartType"
[data]="barChartData"
[options]="barChartOptions">
</google-chart>
<button (click)="updateBarChartData()">Update Bar Chart Data</button>
এখানে, updatePieChartData() এবং updateBarChartData() ফাংশনগুলো বাটন ক্লিক করার পর নতুন ডেটা সেটে চার্ট আপডেট করবে।
Google Charts API-এ Data Binding এর মাধ্যমে আপনি সহজেই একাধিক চার্টের মধ্যে আলাদা আলাদা ডেটা বাইন্ড করতে পারেন। Angular কম্পোনেন্টে বিভিন্ন ধরনের ডেটা (যেমন: Pie Chart, Bar Chart) আলাদা ভাবে তৈরি করে, সেগুলোকে Chart Type অনুযায়ী বাইন্ড করা হয়। ডেটা আপডেট করার সময় স্বয়ংক্রিয়ভাবে চার্ট আপডেট হয়ে যায়, যা dynamic data visualization করতে সাহায্য করে।
Google Charts API ব্যবহার করে আপনি চার্টের Styling এবং Layout Management কাস্টমাইজ করতে পারেন। এটি আপনাকে চার্টের দৃশ্যমানতা এবং ব্যবহারের অভিজ্ঞতা উন্নত করতে সহায়তা করে। Styling দ্বারা চার্টের উপাদানগুলোর রঙ, ফন্ট, আকার, লেআউট ইত্যাদি নিয়ন্ত্রণ করা হয়, এবং Layout Management দ্বারা চার্টের সঠিক পজিশন, অক্ষ (axis), এবং স্পেসিং কাস্টমাইজ করা হয়।
চার্টের টাইটেলকে কাস্টমাইজ করার জন্য আপনি titleTextStyle ব্যবহার করতে পারেন, যা টাইটেলের ফন্ট, আকার, রঙ ইত্যাদি নিয়ন্ত্রণ করতে সাহায্য করে।
chartOptions = {
title: 'Sales Data',
titleTextStyle: {
color: 'blue', // Title text color
fontSize: 20, // Title text font size
bold: true, // Title text weight
italic: true // Title text style
}
};
এটি টাইটেলকে স্টাইল করতে সাহায্য করবে, যেমন রঙ, আকার এবং ফন্ট স্টাইল।
চার্টের সাইজ কাস্টমাইজ করতে width এবং height অপশন ব্যবহার করা হয়:
chartOptions = {
width: 800, // Chart width
height: 500, // Chart height
};
এটি আপনার চার্টের আকার নির্ধারণ করবে। আপনি responsive হতে চাইলে CSS ব্যবহার করতে পারেন।
চার্টের লেজেন্ডের পজিশন, টেক্সট স্টাইল এবং এলাইনমেন্ট কাস্টমাইজ করা যেতে পারে:
chartOptions = {
legend: {
position: 'bottom', // Legend position: top, bottom, left, right
alignment: 'center', // Legend text alignment
textStyle: {
color: 'green', // Legend text color
fontSize: 14, // Legend text size
fontName: 'Arial' // Legend font type
}
}
};
এটি লেজেন্ডের অবস্থান, টেক্সটের আকার, রঙ এবং স্টাইল পরিবর্তন করতে ব্যবহৃত হয়।
Tooltip ব্যবহারকারীর চার্টের উপর হোভার করার সময় প্রদর্শিত হয় এবং আপনি এটি কাস্টমাইজ করতে পারেন:
chartOptions = {
tooltip: {
trigger: 'focus', // Tooltip appears on focus
isHtml: true, // Enable HTML content in the tooltip
textStyle: {
color: 'black', // Tooltip text color
fontSize: 12 // Tooltip text font size
}
}
};
এটি টুলটিপের স্টাইল এবং প্রেজেন্টেশন কাস্টমাইজ করতে ব্যবহৃত হয়।
Axis (অক্ষ) গুলি চার্টের স্কেল প্রদর্শন করে। আপনি hAxis (horizontal axis) এবং vAxis (vertical axis) এর টাইটেল, লেবেল, গ্রিডলাইন এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারেন।
chartOptions = {
hAxis: {
title: 'Months', // Horizontal axis title
titleTextStyle: {
color: 'blue', // Axis title color
fontSize: 14, // Axis title font size
bold: true // Axis title bold
},
textStyle: {
color: 'red', // Axis text color
fontSize: 12 // Axis text font size
},
gridlines: {
color: '#e5e5e5', // Gridlines color
count: 5 // Number of gridlines
}
},
vAxis: {
title: 'Sales', // Vertical axis title
textStyle: {
color: 'green', // Axis text color
fontSize: 12 // Axis text font size
}
}
};
এটি অক্ষের টাইটেল, টেক্সট এবং গ্রিডলাইন কাস্টমাইজ করতে ব্যবহৃত হয়।
চার্টের বিভিন্ন উপাদানের রঙ কাস্টমাইজ করতে colors অপশন ব্যবহার করা হয়:
chartOptions = {
colors: ['#4285F4', '#EA4335', '#FBBC05', '#34A853'] // Custom color set for the chart
};
এটি আপনাকে আপনার চার্টের বার, লাইন, বা অন্যান্য অংশের জন্য কাস্টম রঙ সেট করতে সহায়তা করে।
Gridlines চার্টের অক্ষের স্কেলকে সহায়ক হিসেবে প্রদর্শন করে। আপনি গ্রিডলাইনগুলোর রঙ, প্রস্থ এবং সংখ্যা কাস্টমাইজ করতে পারেন:
chartOptions = {
hAxis: {
gridlines: {
color: '#e5e5e5', // Gridline color
count: 5 // Number of gridlines
}
},
vAxis: {
gridlines: {
color: '#e5e5e5', // Gridline color
count: 6 // Number of gridlines
}
}
};
এটি গ্রিডলাইন কাস্টমাইজ করতে ব্যবহৃত হয়।
Layout Management দিয়ে আপনি চার্টের উপাদানগুলি পজিশন এবং বিন্যাস করতে পারেন। এর মধ্যে চার্টের টাইটেল, লেজেন্ড, আকার এবং বিভিন্ন স্টাইলিং সংক্রান্ত অপশনগুলো অন্তর্ভুক্ত।
অনেক চার্টে আপনি 3D ভিউ অ্যাক্টিভেট করতে পারেন। এটি সাধারণত PieChart, ColumnChart, BarChart ইত্যাদিতে ব্যবহৃত হয়।
chartOptions = {
is3D: true, // Enable 3D effect for the chart
};
এটি আপনার চার্টের ভিউকে 3D করে তুলবে।
চার্টের ব্যাকগ্রাউন্ড রঙ কাস্টমাইজ করতে backgroundColor অপশন ব্যবহার করা হয়:
chartOptions = {
backgroundColor: '#f2f2f2' // Set chart background color
};
এটি আপনার চার্টের ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে সহায়তা করে।
চার্টের অবস্থান নির্ধারণ করতে CSS ব্যবহার করতে পারেন। Angular অ্যাপে google-chart কম্পোনেন্টের মাধ্যমে এটি কাস্টমাইজ করা যায়:
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions"
style="display: block; margin: 0 auto;">
</google-chart>
এটি চার্টকে center বা অন্য কোনো অবস্থানে পজিশন করতে সাহায্য করবে।
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Custom Google Chart';
chartType = 'PieChart'; // Chart Type
chartData = [
['Task', 'Hours per Day'],
['Work', 8],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 8]
]; // Chart Data
chartOptions = {
title: 'My Daily Activities', // Title
titleTextStyle: {
color: 'green',
fontSize: 20,
bold: true
},
pieHole: 0.4, // Doughnut Style
width: 600,
height: 400,
colors: ['#FF5733', '#33FF57', '#3357FF'], // Custom Colors
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: 'black', // Legend text color
fontSize: 14 // Legend font size
}
},
tooltip: {
trigger: 'focus', // Tooltip trigger
isHtml: true, // Enable HTML in tooltip
textStyle: {
color: 'black',
fontSize: 14
}
}
};
}
HTML:
<h1>{{ title }}</h1>
<google-chart
[type]="chartType"
[data]="chartData"
[options]="chartOptions">
</google-chart>
Chart Styling এবং Layout Management ব্যবহার করে আপনি Google Charts-এ
চার্টের কাস্টমাইজেশন করতে পারেন। বিভিন্ন উপাদান যেমন title, legend, axis, tooltip, colors, gridlines, এবং 3D effect কাস্টমাইজ করতে এসব অপশন ব্যবহৃত হয়। এভাবে আপনি চার্টের দর্শনীয়তা এবং ব্যবহারযোগ্যতা বাড়াতে পারেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
